<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img {
            width: 300px;
            height: 150px;
        }

        .box {
            padding-left: 150px;
        }

        span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-left: 10px;
            background: #ccc;
        }

        .active {
            background: orange !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="del">向左</button>
        <!-- imgList[count] -->
        <img class="img" :src="imgList[count]? imgList[count].image_src: ''" alt="">
        <button @click="add">向右</button>
        <div class="box">
            <span :class="{ active: index === count }" @click="changCount(index)"
                v-for="(item, index) in imgList"></span>
        </div>
    </div>


    <script src="./js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.25.0/axios.js"></script>
    <!-- axios -->
    <script>

        // 生命周期 ()
        new Vue({
            el: "#app",
            // Vue实例创建之前（一般不会使用）
            beforeCreate() {
                console.log("beforeCreate")
            },
            data: {
                // imgList: [
                //     "https://img2.baidu.com/it/u=98371021,1121096365&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1646892295&t=7f3a9c29c0b263336c58ceaa81369405",
                //     "https://img0.baidu.com/it/u=3930437902,1690680217&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1646892295&t=4ab553e6dcecde00cd7829d66c3c5bbd",
                //     "https://img1.baidu.com/it/u=3371020681,2093022493&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1646892297&t=02d61842a01981663813f8830175e34d"
                // ],
                imgList: [],
                count: 0
            },
            // 可以读取data中的数据, methods中的方法
            created() {
                // ajax（1.获取数据  2.功能性接口）

                // axios  通过promise的方式对ajax进行了二次封装
                // axios.请求方式(请求地址).then(res => { })
                axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata").then(res => {
                    this.imgList = res.data.message
                    console.log(res.data.message)
                })
                // console.log("created")
                // setInterval(() => {
                //     this.add()
                // }, 2000)
            },
            methods: {
                add() {
                    if (this.count >= this.imgList.length - 1) {
                        this.count = 0
                    } else {
                        this.count += 1
                    }
                },
                del() {
                    if (this.count === 0) {
                        this.count = this.imgList.length - 1
                    } else {
                        this.count -= 1
                    }
                },
                changCount(index) {
                    this.count = index
                }
            }
        })
    </script>
</body>

</html>